import type { TableColumnCtx } from 'element-plus'
export { ElInput, ElSelect, ElDatePicker, ElTreeSelect } from 'element-plus'
import { Component } from 'vue'

import { CESelect } from '../CSelect'
import { CETreeSelect } from '../CETreeSelect'
import { CESwitch } from '../CESwitch'
import { CERadioGroup } from '../CERadioGroup'

export const myComponentsTable = {
  CESelect,
  CETreeSelect,
  CESwitch,
  CERadioGroup
}

export type MyComponentsTable =
  | 'CESelect'
  | 'CETreeSelect'
  | 'CESwitch'
  | 'CERadioGroup'
export type GlobalComponents =
  | 'ElInput'
  | 'ElSelect'
  | 'ElDatePicker'
  | 'ElTreeSelect'

export interface ToopTipTable {
  effect?: string
  placement?: string
}

export interface ToolTipCustomAttrsTable {
  color?: string
  width?: string
  fontSize?: string
  onToolClick?: (row: any) => any | null
}

export interface RenderComponentTypes {
  el: Component | MyComponentsTable | GlobalComponents
  elAttrs?: any
  required?: boolean
  msg?: string
}

export interface EditTableColumn<T extends Record<string, any> = any>
  extends Partial<TableColumnCtx<any>> {
  key: T
  label?: string
  showTooltip?: boolean
  // tooltip 原生属性
  showTootipAttrs?: ToopTipTable
  // tooltip 扩展属性
  showToopCustomAttrs?: ToolTipCustomAttrsTable
  editTable?: boolean
  renderComponents?: RenderComponentTypes
}
